<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref" style="width: 100%;height:100%"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			charts:null,
			alldata:[
				{
				  name: '建筑',
				  value: 0
				},
				{
				  name: '人像',
				  value: 0
				},
				{
				  name: '建筑',
				  value: 0
				},
				{
				  name: '美食',
				  value: 0
				},
				{
				  name: '动物',
				  value: 0
				}
			],
			alldata:[
				{
				  name: '建筑',
				  value: 5
				},
				{
				  name: '人像',
				  value: 6
				},
				{
				  name: '风景',
				  value: 4
				},
				{
				  name: '美食',
				  value: 4
				},
				{
				  name: '动物',
				  value: 3
				}
			],
    }
  },
  mounted () {
		this.initOption()
	},
  destroyed () {},
  methods: {
		initOption(){
			this.charts = this.$echarts.init(this.$refs.seller_ref)
			console.log(this.charts)
		var option = {
			title:{
				text:'分类占比',
				textStyle:{
					color:'#2a2a2a'
				},
				left:'5%'
			},
		  series: [
		    {
		      type: 'pie',
		      data: this.alldata,
					label:{
						show:true,
						formatter:(arg)=>{
							let str = arg.data.name+'\n'+ arg.percent.toFixed(0)+'%'
							return str
						},
						fontSize:16
					}
		    },
		  ]
		}
		this.charts.setOption(option)
		}
	}
}
</script>

<style  scoped>
	.com-container{
		width: 100%;
		height: 100%;
	}
</style>
